#{extends 'organization.html' /}
#{set title:'Create a New Organization' /}
<html>
	<head>
		<title>Create New Organization</title>
	</head>
	<body>
	
	#{if session.get("username") == null}
<p id="errorMsg"> You must be connected to edit an organization </p>
<br></br>
<style type="text/css">
#errorMsg{
color: red;
font: italic;
}
</style>

<script type="text/javascript">

      $(document).ready(function() {
	
 		$('#background').hide().addClass( 'positioned' ); 
 			});
</script>

<a href = "@{Secure.login()}" > login now</a>
<a href="@{Users.register()}">New user? register now!</a>
#{/if}

<div id="background">

		<h1>Please Insert The Organization Information</h1>

		<form action="@{Organizations.createOrganization()}" method="POST" class="newOrg">

			#{ifErrors}
					<h1>All Fields are required</h1>
		   	#{/ifErrors}
		#{form  @Organizations.createOrganization()}
			<div class="formEntry">
				<div class="formLabel">
					<label>Organization Name</label>
				</div>	
				<input type="text" name="orgName" value="${flash.orgName}"></input>
				<label class="error">#{error 'orgName' /}</label>
				<div class="clear"></div>
			</div>
			<div class="formEntry">
				<div class="formLabel">
					<label>Privacy Status</label>
				</div>	
				<input type="radio" name="orgPrivacy" value="0" /> <label>public</label>
				<input type="radio" name="orgPrivacy" value="1" /> <label>private</label>
				<input type="radio" name="orgPrivacy" value="2" /> <label>secret</label>
				<label class="error">#{error 'orgName' /}</label>
				<div class="clear"></div>
			</div>
			<div class="formEntry">
				<div class="formLabel">
					<label>Description</label>
				</div>
				<textarea type="text" name="orgDescription" value="${flash.orgDescription}"></textarea>
				<label class="error">#{error 'orgDescription' /}</label><br>
				<div class="clear"></div>
			</div>
			<input type="submit" value="submit" id="submit"></input>
		#{/form}
</div>